<template lang="pug">
  el-dialog(
    title="选择新负责人"
    :visible="visibleDialog"
    append-to-body
    center
    destroy-on-close
    v-el-drag-dialog
    width="480px"
    close-on-click-modal
    @close="$_handleCancel"
  )
    el-select.w(v-model="selectedId")
      el-option(v-for="item in staffList" :key="item.id" :label="item.realName" :value="item.id")
    p.tr.mt20
      el-button(@click="$_handleCancel" size="small") 取消
      el-button(type="primary" size="small" @click="sureHandle" :loading="submitting") 确定
</template>
<script>
import elDragDialog from '@/directive/el-drag-dialog'
import { contractTranfer, getTransferStaffList } from '../api'

export default {
  directives: { elDragDialog },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: [Number, String],
      default: ''
    }
  },
  data () {
    return {
      selectedId: '',
      staffList: [],
      submitting: false
    }
  },
  computed: {
    // 通过计算属性，对.sync进行转换，外部也可以直接使用visible.sync
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created () {
    this.getStaffList()
  },
  methods: {
    // 获取员工列表
    getStaffList () {
      getTransferStaffList({ permission: 'teach::classes::sales_list' }).then(res => {
        this.staffList = res || []
      })
    },
    // 确定
    sureHandle () {
      const { selectedId, id, staffList } = this
      this.submitting = true
      contractTranfer({
        contractId: id,
        staffId: selectedId,
        staffName: staffList.find(x => x.id === selectedId).realName
      }).then(() => {
        this.$message.success('移交成功')
        this.$emit('getInfo')
        this.$_handleCancel()
      }).finally(() => {
        this.submitting = false
      })
    },
    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>
